<template>
  <div class="range-select">
    <a-input-number v-model="min" class="input" @change="handleMinChange" />
    -
    <a-input-number v-model="max" class="input" @change="handleMaxChange" />
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

const rangeSelect = defineModel<number[]>('modelValue', { default: () => [null, null] });

const min = ref<number | null>(null);
const max = ref<number | null>(null);

const handleMinChange = (value: number) => {
  min.value = value;
  rangeSelect.value = [min.value, max.value];
}

const handleMaxChange = (value: number) => {
  max.value = value;
  rangeSelect.value = [min.value, max.value];
}
</script>

<style scoped>
.range-select {
  display: flex;
  align-items: center;
}

.input {
  margin: 0 8px;
}
</style>
